<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<input class="uni-input search-area" v-model="keywords" @confirm="search" focus
					placeholder="搜索你想了解的问题或用户..." />
			</view>
			<view class='nav'>
				<u-sticky>
					<u-tabs :list="tabsList" @click="tabsCheck"></u-tabs>
				</u-sticky>
			</view>
		</view>

		<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="refresh" @scrolltolower="loadmore">
			<u-swipe-action v-for="(item,index) in buslist" :key="index">
				<u-swipe-action-item :options="action" @click="unfollowShow(item)"
					:disabled="typeid === 0 ? false : true">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="item">
							<view class="business">
								<view class="avatar">
									<image mode="aspectFit" v-if="item.business.avatar_text"
										:src="item.business.avatar_text"></image>
									<image mode="aspectFit" v-else src="/static/avatar.png"></image>
								</view>
							</view>

							<view class="info">
								<navigator :url="'/pages/business/center' + '?' + 'accessToBusid=' + item.business.id"
									v-if="item.business.nickname" class="nickname">{{ item.business.nickname }}</navigator>
								<navigator :url="'/pages/business/center' + '?' + 'accessToBusid=' + item.business.id"
									v-else class="nickname">匿名用户</navigator>

								<view class="desc">
									这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！这家伙儿很懒，什么也没写！
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</scroll-view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="unfollow"></u-modal>

		<!-- 回到顶部按钮 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}
		this.BusData()
	},
	//上拉加载
	onReachBottom() {
		if (this.finished) return;
		this.page++
		this.BusData()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	data() {
		return {
			show: false,
			content: '是否确认取消关注',
			action: [{  // 滑动单元格按钮内容
				text: '取消关注',
				style: {
					backgroundColor: 'rgb(245, 108, 108)',
				}
			}],
			// tabs列表
			tabsList: [
				{ id: 0, name: '我的关注' },
				{ id: 1, name: '我的粉丝' },
			],
			// 用户信息列表
			buslist: [],
			triggered: false,
			finished: false,
			// 回到顶部
			scrollTop: 0,
			business: {},
			page: 1,
			typeid: 0,
			keywords: '',
			unfollowBusid: 0,
		}
	},
	methods: {
		// 搜索事件
		search() {
			this.refresh()
		},
		confirm() {
			this.show = false
		},
		// tabs 点击切换事件
		async tabsCheck(item) {
			this.typeid = item.id
			this.buslist = []
			this.keywords = ''
			// 调用刷新事件
			this.refresh()
		},
		// 获取用户信息列表
		async BusData() {
			//组装数据
			var data = {
				page: this.page,
				typeid: this.typeid, // 数据类型（ 0 我的关注、1 我的粉丝）
				keywords: this.keywords, // 搜索用户关键字
				busid: this.business.id
			}
			// 用户列表接口
			var result = await uni.$u.http.post('/Fans/follow', data)

			//改变下拉的状态
			this.triggered = false

			if (result.code == 0) {
				this.finished = true

				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			}

			this.buslist = this.buslist.concat(result.data)
		},
		// 刷新事件
		refresh() {
			this.triggered = true;
			this.finished = false;
			this.buslist = []
			this.BusData()
		},
		loadmore() {
			console.log('上拉加载')
		},
		unfollowShow(item) {
			this.show = true
			this.unfollowBusid = item.business.id
		},
		// 滑动单元格按钮点击事件
		async unfollow() {
			this.show = false
			// 组装数据
			var data = {
				busid: this.business.id,
				fansid: this.unfollowBusid
			}
			// 发起请求
			var result = await uni.$u.http.post('/fans/del', data);

			if (result.code == 0) {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			} else {
				this.$refs.notice.show({
					type: 'success',
					message: result.msg
				})
				this.refresh()
			}
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	/* overflow-x: hidden; */
}

.search {
	height: 238rpx;
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	align-content: center;
}

.search-area {
	width: 100%;
	padding-left: 40px;
	height: 88rpx;
	background-color: #fff;
	background-image: url("/static/search.png");
	background-repeat: no-repeat;
	background-size: 30rpx 30rpx;
	background-position: 35rpx 30rpx;
	border-radius: 11rpx;
	line-height: 88rpx;
	color: #2f2e2e;
	font-size: 30rpx;
}

.nav {
	display: flex;
	background-color: #f1f6f9;
	position: relative;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}

.nav .nav-item {
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	color: #666;
	font-size: 30rpx;
}

.nav .active {
	color: #000;
	font-weight: 600;
}

.nav .active-line {
	background-color: #038fff;
	width: 35rpx;
	height: 4rpx;
	position: absolute;
	top: 86rpx;
	transition: left 0.2s;
}

.list .item {
	display: flex;
	width: 95%;
	margin: 10px auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .nickname,
.info .desc {
	margin-bottom: 2px;
}

.info .nickname {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	font-weight: bold;
}

.info .desc {
	font-size: .8em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
</style>
